<div class="orders-container">
	<div class="facet-group-container nav-panel">
		<div ng-repeat="group in data.facetGroups" class="facet-group-wrapper">
			<div class="facet-group-name-wrapper"
				ng-click="group.$$isOpen = !group.$$isOpen">
				<span class="facet-group-name">{{::group.name}}</span><span
					class="glyphicon"
					ng-class="{'glyphicon-menu-left': !group.$$isOpen, 'glyphicon-menu-down': group.$$isOpen}"></span>
			</div>
			<ul class="facet-group-dropdown-menu" uib-collapse="!group.$$isOpen" ng-if="group.index === 'status'">
				<li ng-repeat="filter in group.filters" class="facet-filter-wrapper" ng-click="filter.$$select = !filter.$$select">
					<nice-checkbox nice-model="filter.$$select"></nice-checkbox>
						<a class="filter-name">{{::filter.name}}</a>  
					<div class="little-box" ng-class="{'canceled': filter.index === 'CANCELED', 'consulting': filter.index === 'CONSULTING',
						'reserved': filter.index === 'RESERVED', 'feasted': filter.index === 'FEASTED', 'cashback': filter.index === 'CASHBACK', 
						'to-be-reviewed': filter.index === 'TO_BE_REVIEWD', 'done': filter.index === 'DONE'}">
					</div>
				</li>
			</ul>
			<ul class="facet-group-dropdown-menu" uib-collapse="!group.$$isOpen"
				ng-if="group.index === 'contract_status' || group.index === 'payment_status'">
				<li ng-repeat="filter in group.filters" class="facet-filter-wrapper"
					ng-click="data.toggleStatus(group, filter)">
					<div class="radio-wrapper">
						<div class="radio-choosen" ng-class="{'choosen': filter.$$select}"></div>
					</div>
					<a class="filter-name">{{::filter.name}}</a>
				</li>
			</ul>
			<ul class="facet-group-dropdown-menu" uib-collapse="!group.$$isOpen"
				ng-if="group.index === 'date'">
				<li ng-repeat="filter in group.filters" class="facet-filter-wrapper"
					ng-click="data.toggleDateFilter(group, filter)">
					<div class="radio-wrapper">
						<div class="radio-choosen" ng-class="{'choosen': filter.$$select}"></div>
					</div>
					<a class="filter-name">{{::filter.name}}</a>
				</li>
			</ul>
		</div>
	</div>
	<div class="search-result-container">
		<div class="search-wrapper">
			<div uib-dropdown>
				<button class="btn btn-primary btn-search-select"
					uib-dropdown-toggle>
					{{data.select.name}}<span class="caret"></span>
				</button>
				<ul uib-dropdown-menu class="dropdown-menu">
					<li ng-click="data.changeSelect(select)"
						ng-repeat="select in data.orderSelectList"
						class="order-search-select">{{::select.name}}</li>
				</ul>
			</div>
			<input type="text" ng-model="data.search" class="search-input" />
			<button class="btn btn-primary search-button"
				ng-click="data.searchOrders()">
				<span class="glyphicon glyphicon-search"></span>
			</button>
		</div>
		<div class="search-result-wrapper">
			<ul>
				<li ng-repeat="result in data.searchResults" class="search-result">
					<div class="row order-result-row">
						<div class="col-md-12 order-number-row order-state" ng-class="{'canceled': result.orderStatus === 'CANCELED', 'consulting': result.orderStatus === 'CONSULTING',
						'reserved': result.orderStatus === 'RESERVED', 'feasted': result.orderStatus === 'FEASTED', 'cashback': result.orderStatus === 'CASHBACK', 
						'to-be-reviewed': result.orderStatus === 'TO_BE_REVIEWD', 'done': result.orderStatus === 'DONE'}">
							<h2 class="order-number">訂單號</h2>
							<a class="order-link" ng-href="/FeastBooking/order/{{::result.id}}">{{::result.orderNumber}}</a>
							<span class="order-status">({{result.orderStatus | orderState}})</span>
						</div>
						<label-link class="col-md-6" label="酒店" text="{{result.hotel}}"
							link="/FeastBooking/hotel/{{result.hotelId}}/info"></label-link>
						<label-plain-text class="col-md-6" label="聯係人" model="result.contact"></label-plain-text>
						<label-plain-text class="col-md-6" label="用戶" model="result.customer"></label-plain-text>
						<label-plain-text class="col-md-6" label="中介人"
							model="result.recommender"></label-plain-text>
						<label-plain-text class="col-md-6" label="開始時間"
							model="result.orderTime"></label-plain-text>
						<label-plain-text class="col-md-6" label="更新時間"
							model="result.lastUpdated"></label-plain-text>
					</div>
				</li>
			</ul>
			<div class="table-pagination" ng-show="data.pagination.totalCount">
				<ul uib-pagination items-per-page="data.pagination.size"
					total-items="data.pagination.totalCount"
					ng-model="data.pagination.current" ng-change="data.changePage()"
					previous-text="前一頁" next-text="后一頁" max-size="data.pagination.maxCount"></ul>
			</div>
		</div>
	</div>
</div>